<template>
  <div>
    <button @click="delBanner">删除轮播图</button>
    <button @click="getMenu">获取菜单</button>
    <hr>
    <button @click="delBannerPost">删除轮播图-post</button>
    <button @click="getMenuGet">获取菜单-get</button>
    <hr>
    <button @click="delBannerApi">删除轮播图-fn</button>
    <button @click="getMenuApi">获取菜单-fn</button>
    <hr>
    <button @click="all">并发</button>
    <h2>{{alia}}</h2>
    <img v-if="imgSrc" :src="imgSrc" alt="">
  </div>
</template>

<script>
import {get, post} from '../http'
import {getMenuFn, delBannerFn} from '../api'
import qs from 'qs'
// 引入原生的axios
import axios from 'axios'
export default {
  data() {
    return {
      alia: '',
      imgSrc:''
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      // .get get请求，第一个参数是接口地址
      // this.$http.get('https://api.imjad.cn/cloudmusic/?type=detail&id=28012031')
      //   .then(res => {
      //     // 成功的回调
      //     // console.log(res.data.songs[0].al.picUrl);
      //     this.alia = res.data.songs[0].alia[0];
      //     this.imgSrc = res.data.songs[0].al.picUrl;
      //   })
      //   .catch(err => {
      //     // 失败的回调
      //     console.log(err);
      //   })
      // ==========================
      this.$http('https://api.imjad.cn/cloudmusic', {
        params: {
          type: 'detail',
          id: 28012031
        }
      })
        .then(res => {
          this.alia = res.songs[0].alia[0];
          this.imgSrc = res.songs[0].al.picUrl;
        })
        .catch(err => {
          // 失败的回调
          console.log(err);
        })
    },
    delBanner() {
      // qs序列化，将post请求的数据更改格式，将对象变成字符串
      // let dataQs = qs.stringify({id: 50698});
      // console.log(dataQs);
      this.$http.post('/bannerdelete', {id: 50698})
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          // 失败的回调
          console.log(err);
        })

        // ==================
        // post上传文件
        // let fd = new FormData();
        // fd.append('age', 18);
        // fd.forEach((val, name) => {
        //   console.log(name);
        //   console.log(val);
        // })
    },
    getMenu() {
      this.$http('/menulist')
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        })
    },
    getMenuFn() {
      return this.$http('/menulist')
    },
    delBannerFn() {
      return this.$http.post('/bannerdelete', {id: 50698})
    },
    all() {
      // 通过promise.all()方法，实现请发请求。需要使用原生的axios，不用实例化之后的
      axios.all([this.getMenuFn(), this.delBannerFn()])
        .then(axios.spread((res1, res2) => {
          console.log(res1);
          console.log(res2);
        }))
    },
    getMenuGet() {
      // 自己封装的get
      get('/menulist')
      .then(res => {
        console.log(666, res);
      })
    },
    async delBannerPost() {
      // 自己封装的post
      let res = await post('/bannerdelete', {id:304986039586});
      console.log(res);
    },
    getMenuApi() {
      getMenuFn('/menulist')
    },
    delBannerApi() {
      delBannerFn('/bannerdelete', {id: 87654})
    }
  }
}
</script>

<style>

</style>